<template>
  <div class="ur-card" >
    <card-header :title="'上电时长'" :hasBackground="true"></card-header>
    <div class="ur-card-body pl-0" :class="{active:statisticIndex==2}">
      <div class="position-relative w-100" >
        <title-mark class="ml-3" :title="'用电时长'"></title-mark>
        <div class=" mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="query('year',2)" size="mini" :class="{active:electricityTimeType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="query('month',1)" size="mini" :class="{active:electricityTimeType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="query('day',0)" size="mini" :class="{active:electricityTimeType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart3" class="w-100" :style="{'height':height+'px'}" ref="echarts3"
             v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import chart from 'api/chart'
  import cardHeader from "base/card-header"
  import titleMark from "base/titleMark"

  export default {
    components: {cardHeader,titleMark},
    props: {
      height:0,
      statisticIndex:{
        type:Number,
        default:2
      },
      isRefresh:false
    },
    data() {
      return {
        loading:false,
        electricityTimeChart: null,
        electricityTimeType:'day',
        typeIndex:0
      }
    },
    watch: {
      statisticIndex:{
        handler(newValue, oldValue) {
          this.statisticIndex = newValue
        },
        deep: true
      },
      electricityTimeType(type){
        this.electricityTimeData(type)
      },
      isRefresh:{
        handler(newValue, oldValue) {
          this.isRefresh = newValue
          if(newValue){
            this.setTimer()
          }else{
            this.$store.commit('timer/clearElectricityTimer')
          }
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        electricityTimer: state => state.timer.electricityTimer,
      })
    },
    methods: {
      query(type,index){
        this.typeIndex = index
        this.electricityTimeType = type
        this.$store.commit('timer/clearElectricityTimer')
      },
      setTimer(){
        let _this=this
        let types=['day','month','year']
        this.$store.commit('timer/setElectricityTimer', setInterval(() => {
          _this.typeIndex++
          if (_this.typeIndex == 3) _this.typeIndex = 0
          _this.electricityTimeType = types[_this.typeIndex]
        }, 60000))
      },
      electricityTime(){//用电时长
        this.electricityTimeChart=chart.barChart('myChart3')
        this.electricityTimeData('day')
      },
      //用电时长数据
      async electricityTimeData(type){
        // this.electricityTimeType = type
        let res = await api.fetchSimple('/OverView/TotalLightingHours', {type: type})
        let data = res? res:[]
        let xData = [], yData = []
        for (let i = 0; i < data.length; i++) {
          if (type == 'year') {
            xData.push(api.formatDate(data[i].Date, 'yyyy'))
          } else if (type == 'month') {
            xData.push(api.formatDate(data[i].Date, 'yyyy-MM'))
          } else {
            xData.push(api.formatDate(data[i].Date, 'MM-dd'))
          }
          yData.push((data[i].Hours/window.InitData.electricityTimeVal).toFixed(2)) //阿尔伦斯
          // yData.push(data[i].Hours)
        }
        let formatter = '时间：{b0}<br/>用电时长：{c0}h'
        let shadowColor = ['rgba(119,219,244,0.5)', 'rgba(119,219,244,0)']
        chart.setLineOptionChart(this.electricityTimeChart, formatter, xData, yData, '能耗', '#1FC0E6', shadowColor)
        if(!this.electricityTimer&&this.isRefresh){//定时器开启时
          this.setTimer()
        }
      },
    },
    created() {
     this.setTimer()
    },
    mounted() {
      this.electricityTime()
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
